import React from 'react';
import HttpRequest from '../HttpRequest.js';
//import WorkspaceListNav from './workspaceListNav.jsx';
import Input from "react-bootstrap/lib/Input";
import Modal from "react-bootstrap/lib/Modal";
import Button from "react-bootstrap/lib/Button";
import CreateWorkspaceDlg from "./createWorkspaceDialog.jsx";
import msgFrontAgent from  '../msgFrontAgent.js';

var is_validated = false;
var WorkspaceManage = React.createClass({
    getInitialState: function () {
        return {
            buttonDisplay: "block",
            current_project: this.props.project,
            tableDisplay: "none",
            workspaces: []
        }
    },
    componentWillReceiveProps: function (newProps) {
        this.setState({
            current_project: newProps.project
        }, this._getWorkspaces);
    },
    componentWillMount: function () {
        this._getWorkspaces();
    },
    _getWorkspaces: function () {
        var that = this;
        var project_id = this.state.current_project._id;
        if (project_id) {
            HttpRequest.getWorkspaces(project_id).success(function (res) {
                if (res.length > 0) {
                    this.setState({
                        workspaces: res,
                        buttonDisplay: "none",
                        tableDisplay: "block"
                    });
                } else {
                    this.setState({
                        buttonDisplay: "block",
                        tableDisplay: "none"
                    });
                }

            }.bind(this)).error(function (error) {
                console.log('获取工作空间失败');
            });
        }
    },
    componentDidMount: function () {
        //监听工作空间创建、删除事件
        var that = this;
        msgFrontAgent.onConnected(function () {
                msgFrontAgent.order('create_workspace', function (data) {
                    that._getWorkspaces();
                });
                msgFrontAgent.order('delete_workspace', function (data) {
                    that._getWorkspaces();
                });
            }
        );
    },
    componentWillUnmount: function () {
        //移除监听删除工作空间的过程
        msgFrontAgent.onConnected(function () {
                msgFrontAgent.disorder('create_workspace');
                msgFrontAgent.disorder('delete_workspace');
            }
        );
    },
    create: function () {
        this.refs['createWkp'].handleOpen();
    },
    delete: function (work_id) {
        confirm("确定要删除工作空间吗？", function () {
            var workspace_info = {
                work_id:work_id,
                namespace:this.state.current_project.namespace,
                project_name:this.state.current_project.name
            };
            HttpRequest.deleteWorkspace(workspace_info).success(function (res) {
                if (res.code == 200) {
                    msgFrontAgent.order(res.data.task_id, function (data) {
                        if (data.err) {
                            toastr.error(null, data.err, {timeOut: 0});
                        } else {
                            toastr.success(null, data.body.msg);
                        }
                    });
                }
            }).error(function (error) {
                toastr.error(null, "删除工作空间失败", {timeOut: 0});
            });
        })
    },
    render: function () {
        var that = this;
        return (
            <div>
                <CreateWorkspaceDlg ref="createWkp" project={this.state.current_project} id="createWkpDlg"/>
                <div style={{display:this.state.buttonDisplay}}>
                    <div style={{cursor:"pointer",textAlign:"center",marginTop:"5px"}} onClick={this.create}>
                        <img src="/res/image/addWorkspace.png" style={{width:"20px",height:"20px"}}/>
                    </div>
                </div>
                <div style={{display:this.state.tableDisplay}}>
                    <div>
                        <table id="workspace_table" style={{align:"center",margin:"auto",marginTop:"5px"}}>
                            <tbody>
                            {
                                this.state.workspaces.map(function (workspace, i) {
                                    return <tr key={i}>
                                        <td key={0}><span
                                            style={{fontSize:"14px",color:"#4D5359"}}>{workspace.work_name}</span></td>
                                        <td key={1}><a style={{cursor:"pointer"}}
                                                       onClick={function(){that.delete(workspace._id)}}>
                                            <img src="/res/image/delete.png"
                                                 style={{width:"18px",height:"18px",marginLeft:"5px"}}/></a></td>
                                    </tr>
                                })
                            }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        );
    }
});

module.exports = WorkspaceManage;